$(function () {
  class Show {
    constructor() {
      this.goods_list = $('.goods_category .list li');
      this.list_show = $('.goods_category .list-show')
      this.show_list = $('.list-show .list_left .hot-word-line');
      this.bindEvent();


    }

    bindEvent() {
      for (let i = 0; i < this.goods_list.length; i++) {
        //设置颜色
        this._color = this.color();

        $(this.goods_list[i]).on('mouseenter', () => {
          this.listShow(i)
          this.change_color(i)
        })
        $(this.goods_list[i]).on('mouseleave', () => {
          this.listHide(i)
          this.recover_color(i)
        })

      }

    }
    change_color(index) {
      $($(this.goods_list)[index]).find('a').css({
        color: this._color
      })
    }
    recover_color(index) {
      $($(this.goods_list)[index]).find('a').css({
        color: '#fff'
      })
    }

    listShow(index) {
      $(this.list_show).css({
        display: 'block'
      })
      $(this.show_list[index]).css({
        display: 'block',
      })
    }
    listHide(index) {
      $(this.list_show).css({
        display: 'none'
      })
      $(this.show_list[index]).css({
        display: 'none',
      })
    }
    color() {
      return `rgb( ${parseInt(Math.random() * 256)} , ${parseInt(Math.random() * 256)} , ${parseInt(Math.random() * 256)})`
    }
  }

  new Show()

  class Index {
    constructor() {
      this.defaultmsg = $('.nav-head .defaultmsg')
      this.showmsg = $('.showmsg')
      this.nickname = $('.showmsg .nickname')
      this.quitbtn = $('.showmsg .quit')
      this.id = cookie('ID');
      this.token = cookie('Token');
      if (this.id.length > 0 && this.token.length > 0) {
        this.defaultmsg.css({
          display: 'none'
        })
        this.showmsg.css({
          display: 'block'
        })
        this.getUserInfo()
      }

      this.bindEvent()
    }

    getUserInfo() {
      let options = {
        url: 'http://localhost:8888/users/info/' + this.id,
        headers: {
          "authorization": this.token
        }

      }

      $.ajax(options).then(res => {
        this.render(res)
      })
    }

    render(res) {
      console.log(res);
      this.nickname.text(res.info.nickname);
    }
    quitUser() {
      let options = {
        url: 'http://localhost:8888/users/logout/' + this.id,
      }

      $.ajax(options).then(res => {
        console.log('退出账户成功');
        cookie('ID', null)
        cookie('Token', null)
        setTimeout(() => {
          location.reload()
        }, 500)
      })
    }
    bindEvent() {
      this.quitbtn.on('click', () => {
        this.quitUser()
      })
    }
  }
  new Index();



})
$(function () {
  class Slide {
    constructor() {
      this.mart = $('.mart')
      this.hk = $('.hk')
      this.fashion = $('.fashion')
      this.electronics = $('.electronics')
      this.health = $('.health')
      this.home = $('.home')
      this.outdoor = $('.outdoor')
      this.love = $('.love')
      this.nav_slide = $('.nav_slide')
      this.slide_list = $('.nav_slide .slide_list');
      this.stairs = $(".stairs");

      this.stairs_array = [];
      // console.log(this.mart.offset().top);
      // console.log(this.mart.offset().top + this.mart.height());

      // 把每个楼层的高度， 放入到 floor_array 之中; 
      $.each( this.stairs , ( index , ele ) => {
          this.stairs_array.push( $( ele ).offset().top );
      });

      this.bindEvent()
    }

    bindEvent() {
      $(window).on('scroll', () => {
        if ($(window).scrollTop() >= 500) {
          this.nav_slide.css('display', 'block')
        } else {
          this.nav_slide.css('display', 'none')
        }
        let index = this.getIndex();

        
        switch(index){
          case 0:
            this.clear()
            this.slide_list.find('.slide_li')[0].style.backgroundColor = '#F15453'
            break;
          case 1:
            this.clear()
            this.slide_list.find('.slide_li')[1].style.backgroundColor = '#F15453'
            break;
          case 2:
            this.clear()
            this.slide_list.find('.slide_li')[2].style.backgroundColor = '#F15453'
            break;
          case 3:
            this.clear()
            this.slide_list.find('.slide_li')[3].style.backgroundColor = '#F15453'
            break;
          case 4:
            this.clear()
            this.slide_list.find('.slide_li')[4].style.backgroundColor = '#F15453'
            break;
          case 5:
            this.clear()
            this.slide_list.find('.slide_li')[5].style.backgroundColor = '#F15453'
            break;
          case 6:
            this.clear()
            this.slide_list.find('.slide_li')[6].style.backgroundColor = '#F15453'
            break;
          case 7:
            this.clear()
            this.slide_list.find('.slide_li')[7].style.backgroundColor = '#F15453'
            break;
        }
      })


      this.slide_list.on('click', '.slide_li', (e) => {
        switch (Number($(e.target).attr('data-num'))) {
          case 0:
            $('html,body').animate({
              scrollTop: this.mart.offset().top
            }, 1000)
            break;
          case 1:
            $('html,body').animate({
              scrollTop: this.hk.offset().top
            }, 1000)
            break;
          case 2:
            $('html,body').animate({
              scrollTop: this.fashion.offset().top
            }, 1000)
            break;
          case 3:
            $('html,body').animate({
              scrollTop: this.electronics.offset().top
            }, 1000)
            break;
          case 4:
            $('html,body').animate({
              scrollTop: this.health.offset().top
            }, 1000)
            break;
          case 5:
            $('html,body').animate({
              scrollTop: this.home.offset().top
            }, 1000)
            break;
          case 6:
            $('html,body').animate({
              scrollTop: this.outdoor.offset().top
            }, 1000)
            break;
          case 7:
            $('html,body').animate({
              scrollTop: this.love.offset().top
            }, 1000)
            break;

        }
      })

      $('.nav_slide section').on('click', () => {
        $('html,body').animate({
          scrollTop: 0
        })
      })

    }

    getIndex(){
        let scrollTop = $("html,body").scrollTop();
        // 根据 scrollTop 计算当前楼梯下标 : 
        // -1 : 还未到达第一层楼; 
        // 0 ~ n : 楼层所在位置; 
        // n : 最后一层楼

        if( scrollTop < this.stairs_array[0]){
          //小于开头
           return -1;
        }else if( scrollTop > this.stairs_array[ this.stairs_array.length - 1]){
          // 大于结尾
          return this.stairs_array.length - 1
        }else{
          // 通常情况; 
          for( var i = 0 ; i < this.stairs_array.length ; i ++ ){
             if( scrollTop >= this.stairs_array[i] && scrollTop < this.stairs_array[i + 1 ]){
                return i ; 
             }  
          }


        }
       
    }

    clear(){
      this.slide_list.find('.slide_li').each((index,item)=>{
        item.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'
      })
    }
  }

  new Slide()
})